<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy"
        content="default-src *; connect-src * ws://* wss://*; style-src * 'unsafe-inline' 'unsafe-eval'; media-src * ; img-src * data:; font-src * ; script-src * 'unsafe-inline' 'unsafe-eval';" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>历史记录</title>
    <link rel="stylesheet" href="/static/colorui/main.css">
    <link rel="stylesheet" href="/static/element-ui.css">
</head>

<body>
    <div class="page-size-100 text-red" id="app" v-cloak>
        <div class="padding-xs ">
            <el-row>
                <el-input v-model="query.text" placeholder="请输入任意内容筛选"></el-input>
            </el-row>
            <el-row class="margin-tb-xs">
                <el-button type="danger" size="mini" @click="handleDeleteAll">清空访问记录</el-button>
            </el-row>
            <el-row class="margin-bottom-xs" v-if="false">

                <el-button size="mini">当前历史记录</el-button>
                <el-button size="mini" type="primary" @click="getHistory">查看历史记录</el-button>
                <el-button size="mini" type="success">成功按钮</el-button>
            </el-row>
            <el-row class="margin-top">
                <el-table
                    :data="historyList.filter(data => !query.text || data.title.toLowerCase().includes(query.text.toLowerCase()))"
                    border style="width: 100%" height="600">
                    <el-table-column type="index" label="序号" align="center" width="50"> </el-table-column>
                    <el-table-column prop="id" label="ID" align="center" width="60">
                    </el-table-column>
                    <el-table-column prop="title" label="标题">
                    </el-table-column>
                    <el-table-column prop="http" label="url" width="350">
                    </el-table-column>
                    <el-table-column prop="visitCount" align="center" label="访问次数" sortable width="120">
                    </el-table-column>
                    <el-table-column prop="lastVisitTime" label="最后载入的时间" sortable width="180">
                    </el-table-column>
                    <el-table-column label="操作" sortable>
                        <template slot-scope="scope">
                            <el-button size="mini" @click="handleVisit(scope.$index, scope.row)">访问</el-button>
                            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
        </div>
    </div>
    <script type="text/javascript" src="/static/vue.min.js"></script>
    <script type="text/javascript" src="/static/element-ui.js"></script>
    <script type="text/javascript" src="index.js"></script>
</body>

</html>